<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding-left: 200px;
        }

        input,
        button {
            outline: none;
        }

        ul,
        li {
            list-style: none;
        }

        .addSale,
        .calc {
            width: 200px;
            height: 33px;
            background-color: skyblue;
            color: #fff;
            cursor: pointer;
            border: none;
            margin: 30px;
        }

        input {
            width: 300px;
            height: 30px;
            padding-left: 20px;
            font-size: 22px;
            display: block;
            margin: 20px;
        }

        ul {
            display: flex;
            margin: 20px;
        }

        ul>li {
            width: 120px;
            height: 120px;
            background-color: orange;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
        }

        ul>li.active {
            background-color: skyblue;
        }

        p {
            font-size: 100px;
            color: red;
            margin: 20px;
        }
    </style>
</head>

<body>
    <!-- 总价格 -->

    总价：<input type="text">


    <!-- 折扣类型 -->
    <ul>
        <li class="active">1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>

    <button class="calc">计算总价</button>
    <!-- 最终价格 -->
    最终价格：<p>0.00</p>
    <br />
    <button class="addSale">添加折扣类型</button><br />




    折扣名称(显示在按钮上的文本): <input type="text" class="type">
    计算方式(总价以 x 表示): <input type="text" class="method">

    <script>

        const cal_price = (function () {
            all_data = {
                '300-20': function (origin) { return (origin - Math.floor(origin / 300) * 20).toFixed(2) },
                '80%': function (origin) { return (origin * 0.8).toFixed(2) },
                '50%': function (origin) { return (origin * 0.5).toFixed(2) }
            }

            function inner(type, origin) {
                if (!all_data[type]) {
                    alert('没有这个折扣类型')
                    return origin
                }
                return all_data[type](origin)
            }


            inner.add = function (type, val) {
                all_data[type] = val;
            }

            inner.remove = function (type) {
                delete all_data[type];
            }

            inner.get = function () {
                return all_data
            }


            return inner;
        })()

        const ulEle = document.querySelector('ul');
        // 折扣列表
        const calEle = document.querySelector('.calc');
        // 计算总价
        const pEle = document.querySelector('p');
        // 显示最终价格的方法
        const total_priceEle = document.querySelector('input');
        // 用户输入总价的地方

        const addBtn = document.querySelector('.addSale');
        // 添加折扣 

        const add_type = document.querySelector('.type');
        const add_func = document.querySelector('.method');

        let type = '';
        // 把all_data渲染到折扣类型上  
        bindHTML();
        function bindHTML(){
            const list = cal_price.get();

            // console.log(list);
            let str = '';
            for(let k in list){
                str += `<li data-type="${k}">${k}</li>`
            }

            ulEle.innerHTML = str;


        }

        // 点击折扣类型  (排他)
        tab();
        function tab(){
            ulEle.addEventListener('click',e=>{
                if(e.target.nodeName !== 'LI'){
                    return
                }
                for(let i=0;i<ulEle.children.length;i++){
                    ulEle.children[i].classList.remove('active')
                }
                e.target.classList.add('active');

                type = e.target.dataset.type
            })
        }

        
        // 结算 点击事件 
        calEle.addEventListener('click',()=>{
            const total_price = total_priceEle.value - 0;
            const res = cal_price(type,total_price);
            pEle.innerText = res;
        })
        
        // 添加折扣 

        addBtn.addEventListener('click',()=>{
            // 拿到折扣名称  
            const name = add_type.value;

            // 拿到计算方式 
            const func = add_func.value;//字符串 
            // x-Math.floor(x/500)*60
            const r = '('+func+').toFixed(2)'
            console.log(r);
            // console.log(name);
            // console.log(func);

            cal_price.add(name,x=>eval(r));

            // 重新渲染页面
            bindHTML();

            // 清空输入框

            add_type.value = '';
            add_func.value = '';

        })




        //eval('字符串');
        //解析字符串 
        // 如果字符串是个js代码 就当成js代码执行 



        // var text = 'alert("hello world")';
        // console.log(text);//alert("hello world") 原样输出
        // eval(text); // 弹框  hello world
    </script>
</body>

</html>